<template>
    <div class="car-arrow-bar">
        <div class="inner">
            <img class="arrows" src="./assets/01.svg" alt="">
        </div>
    </div>
</template>

<script>

</script>

<style scoped>
.car-arrow-bar {
    height: 13rem;
    width: 1.81125rem;
    display: inline-block;
}
.inner {
    overflow: hidden;
    height: 100%;
    width: 100%;
    mask-image: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%);;
}

.arrows {
    width: 100%;
    animation-name: animated01;
    animation-timing-function: linear;
    animation-duration: 500ms;
    animation-iteration-count: infinite;
}

@keyframes animated01 {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-0.905625rem);
    }
}

.reverse {
    transform-origin: 50% 50%;
    transform: rotate(180deg);
}
</style>